<template>
	<view class="pl-5 pr-5">
		<view class="invitetitle">
			<view class="invitetitle-em"></view>
			<view class="invitetitle-text">员工列表</view>
		</view>
		
		<!-- <scroll-view scroll-y :style="'height:'+scrollH+'px;'" style="line-height: 1.7;"> -->
			<block v-for="(item, index) in staff_list_data" :key="index">
				<view class="d-flex a-center mt-1 j-sb">
					<view @tap="yaoyue(item.id)" class="d-flex a-center ">
						<view style="width: 300rpx; margin-right: 30rpx;">
							<view><span style="color: #777;">姓名：</span>{{ item.name }}</view>
							<view><span style="color: #777;">电话：</span>{{ item.tel }}</view>
						</view>
						<view class="d-flex mr-3">
							<view class="inite">邀约</view>
							<view class="inite-count">{{item.invite_count}}</view>
						</view>
					</view>

					<view @click="tongguo(index, item.id)" :class="item.status == 0 ? 'no-pass' : (item.status == 1 ? 'del': 'pass')">
						{{ item.status == 0 ? '点击审核' : (item.status == 1 ? '删除员工' : '已审核') }}
					</view>
				</view>

				<divider />
				
			</block>
			
			<uni-load-more :status="status" style="margin-bottom: 140rpx;" />
			
			<!-- <noMore /> -->
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import uniLoadMore from '../../components/common/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore,
		},
		props: {
			status: null,
			scrollH: null,
			staff_list_data: null,
			factory_id: null,
			activity_id: null
		},
		methods: {
			//先获取员工审核状态，再进入员工管理页面
			yaoyue(id) {
				this.$comm.request({
					url: 'api/staff_status',
					method: 'GET',
					data: {
						fac_id: this.factory_id,
					},
					success: res => {
						var res = res.data
						console.log(res.code + res.msg)
						if (res.code == 201) {
							uni.navigateTo({
								url: '../staff/staff_sign?factory_id=' + this.factory_id + '&activity_id=' + this.activity_id
							})
							return
						} else {
							uni.navigateTo({
								url: 'staff?staff_id=' + id + '&activity_id=' + this.activity_id
							});
						}
					}
				})
			},

			//审核员工
			tongguo(index, factory_id) {
				console.log(this.staff_list_data[index])
				if (this.staff_list_data[index].status == 0) {
					this.$comm.request({
						url: 'api/check_staff',
						method: 'POST',
						data: {
							id: factory_id,
							activity_id: this.activity_id
						},
						success: res => {
							if (res.data.code != 200){
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
								return
							}
							uni.showToast({
								title: res.data.msg,
								icon: "success",
								duration: 1000,
							});
							this.staff_list_data[index].status = 1
							// this.$emit('staff_list')
						}
					});
				} else if (this.staff_list_data[index].status == 1) {
					uni.showModal({
						title: '删除提示',
						content: '是否确定删除员工',
						success: (res) =>{
							if (res.confirm) {
								this.$comm.request({
									url: 'api/staff_del',
									method: 'POST',
									data: {
										staff_id: this.staff_list_data[index].id,
										activity_id: this.activity_id,
									},
									success: res => {
										if (res.data.code != 200){
											console.log(res)
											uni.showToast({
												title: res.data.msg,
												icon: "none"
											});
											return
										}
										uni.showToast({
											title: res.data.msg,
											icon: "success",
											duration: 1000,
										});
										this.staff_list_data[index].status = 2
										this.$emit('staff_list')
									}
								});
							}
							
						}
					})
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/main.css';
	@import  '@/common/zcm-main.css';
	
	.invitetitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 0 10rpx 0;
		
		.invitetitle-em {
			height: 35rpx;
			width: 10rpx;
			background-color: #475dfc;
			border-radius: 50rpx;
		}
	
		.invitetitle-text {
			font-weight: bold;
			margin-left: 10rpx;
		}
	}
	
	.inite {
		font-size: 26rpx;
		color: #ffffff;
		width: 70rpx;
		// height: 40rpx;
		// line-height: 1.7;
		text-align: right;
		padding: 5rpx;
		background-color: #475dfc;
		border-radius: 50rpx 0rpx 0rpx 50rpx;
	}

	.inite-count {
		font-size: 26rpx;
		width: 70rpx;
		padding: 5rpx;
		color: #475dfc;
		text-align: center;
		border: solid 1rpx #475dfc;
		border-radius: 0rpx 50rpx 50rpx 0rpx;
	}

	@mixin pass1 {
		width: 120rpx;
		// margin-left: 50rpx;
		font-size: 25rpx;
		color: #ffffff;
		padding: 6rpx 10rpx 6rpx 10rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	.no-pass {
		@include pass1;
		background-color: #A40000;
	}

	.pass {
		@include pass1;
		background-color: #5fb256;
	}
	.del {
		@include pass1;
		background-color: #f00;
	}
</style>
